import { Suspense, lazy } from 'react'
// import { Col, Row } from 'antd'
// import { havePpermission } from '@/utils'
// import CheckAuthority from '@/components/CheckAuthority'
import styles from './index.module.less'

import PageLoading from '@/components/PageLoading'

import { homeContext } from './_context'
import useHooks from './hook'

const FixedCharts = lazy(() => import('./components/FixedCharts'))
const GradingCharts = lazy(() => import('./components/GradingCharts'))
const TableData = lazy(() => import('./components/TableData'))
const MapCharts = lazy(() => import('./components/MapCharts'))
const DistributedData = lazy(() => import('./components/DistributedData'))
const SearchData = lazy(() => import('./components/SearchData'))

export default () => {
  const hookdata = useHooks()

  return (
    <homeContext.Provider value={hookdata}>
      <div className={styles.conter}>
        <div className={styles.pie}>
          <div className={styles.chart}>
            <Suspense fallback={<PageLoading />}>
              <GradingCharts />
            </Suspense>
          </div>
          <div className={styles.chart}>
            <Suspense fallback={<PageLoading />}>
              <FixedCharts />
            </Suspense>
          </div>
        </div>
        <div className={styles.center}>
          <div className={styles.mapchart}>
            <Suspense fallback={<PageLoading />}>
              <MapCharts />
            </Suspense>
          </div>

          <div className={styles.distributed}>
            <Suspense fallback={<PageLoading />}>
              <DistributedData />
            </Suspense>
          </div>
        </div>
        <div className={styles.bottom}>
          <Suspense fallback={<PageLoading />}>
            <SearchData />
          </Suspense>

          <Suspense fallback={<PageLoading />}>
            <TableData />
          </Suspense>
        </div>
      </div>
    </homeContext.Provider>
  )
}
